<template>
  <h2>员工信息管理</h2>
  <el-divider />
  <el-form :inline="true" :model="empReq" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="empReq.empname" placeholder="请输入姓名" clearable></el-input>
    </el-form-item>
    <el-form-item label="职位">
      <el-select style="width: 250px;" v-model="empReq.postionId" placeholder="请选择" clearable>
        <el-option label="软件工程师" value="1"></el-option>
        <el-option label="高级软件工程师" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="部门">
      <el-select style="width: 250px;" v-model="empReq.deptId" placeholder="请选择" clearable>
        <el-option label="研发一部" value="1"></el-option>
        <el-option label="研发二部" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="入职日期">
      <el-date-picker v-model="empReq.startEntryDate" type="date" placeholder="选择日期" clearable
        value-format="YYYY-MM-DD"></el-date-picker>
      <el-date-picker v-model="empReq.endEntryDate" type="date" placeholder="选择日期" clearable
        value-format="YYYY-MM-DD"></el-date-picker>
    </el-form-item>
    <el-form-item label="状态">
      <el-select style="width: 250px;" v-model="empReq.status" placeholder="请选择" clearable>
        <el-option label="在职" value="1"></el-option>
        <el-option label="离职" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" plain @click="addInfo">
    新增
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="新增员工" width="500">
    <el-form :model="empAdd" label-width="120px" class="emp-form">
      <el-form-item label="员工编号" required>
        <el-input v-model="empAdd.no" placeholder="请输入员工编号" disabled></el-input>
      </el-form-item>
      <el-form-item label="员工姓名" required>
        <el-input v-model="empAdd.empname" placeholder="请输入员工姓名"></el-input>
      </el-form-item>
      <el-form-item label="登录名" required>
        <el-input v-model="empAdd.account" placeholder="请输入登录名"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" required>
        <el-input type="password" v-model="empAdd.password" placeholder="请输入登录密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="邮箱" required>
        <el-input type="email" v-model="empAdd.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="性别" required>
        <el-select v-model="empAdd.sex" placeholder="请选择性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="婚姻状况" required>
        <el-select v-model="empAdd.marryStatus" placeholder="请选择婚姻状况">
          <el-option label="未婚" value="1"></el-option>
          <el-option label="已婚" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" required>
        <el-date-picker v-model="empAdd.birthday" type="date" placeholder="选择日期"
          value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="入职日期" required>
        <el-date-picker v-model="empAdd.entryDate" type="date" placeholder="选择日期"
          value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="初次参加工作日期" required>
        <el-date-picker v-model="empAdd.workStartDate" type="date" placeholder="选择日期"
          value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="系统权限" required>
        <el-select @click="selectAuth" @change="changeAuth" v-model="empAdd.authorityName" placeholder="请选择系统权限">
          <el-option v-for="item in auths" :label="item.authority" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入职部门" required>
        <el-select v-model="empAdd.deptId" placeholder="请选择部门">
          <el-option label="研发一部" value="1"></el-option>
          <el-option label="研发二部" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位" required>
        <el-select v-model="empAdd.positionId" placeholder="请选择职位">
          <el-option label="软件工程师" value="1"></el-option>
          <el-option label="高级软件工程师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="考勤方式" required>
        <el-select v-model="empAdd.status" placeholder="请选择考勤方式">
          <el-option label="正常A班" value="1"></el-option>
          <el-option label="正常B班" value="2"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="照片" required>
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess">
          <el-button type="primary">上传照片</el-button>
        </el-upload>
      </el-form-item>
      <div class="block">
        <el-avatar shape="square" :size="50" :src="squareUrl" />
      </div>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="insertOrUpdateEmp" type="primary">
        提交
      </el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>

  <el-table class="employeeList" :data="empRsp" style="width: 100%">
    <el-table-column prop="no" label="编号"></el-table-column>
    <el-table-column prop="empname" label="姓名"></el-table-column>
    <el-table-column prop="sex" label="性别"></el-table-column>
    <el-table-column prop="positionName" label="职位"></el-table-column>
    <el-table-column prop="deptName" label="部门"></el-table-column>
    <el-table-column prop="status" label="状态"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="viewEmp(scope.row)">查看</el-button>
        <el-button type="warning" @click="modifyEmp(scope.row)">修改</el-button>
        <el-button type="danger" @click="leaveEmp(scope.row)">离职</el-button>
        <el-button type="success" @click="transferEmp(scope.row)">调转</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block" style="margin-left: 40vh; padding-bottom: 50px;">
    <el-pagination :teleported="false" v-model:current-page="pageNum" v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20]" :size="pageSize" :disabled="false" :background="false"
      layout="total, sizes, prev, pager, next" :total="total" @size-change="onSubmit" @current-change="onSubmit" />
  </div>
</template>

<script name='Emplist' setup lang='ts'>

import { ref } from 'vue';
import type { ApiResponse, Authority, EmpAdd, EmpReq, EmpRsp } from '../model';
import { addOrUpdateEmp, getAuthority, getOneEmp, selectEmp, updateStatusEmp } from '../api';
import router from '../router';
import { ElMessage } from 'element-plus';

const pageSize = ref(5)
const pageNum = ref(1)
const total = ref(0)
const dialogFormVisible = ref(false)

let empReq = ref<EmpReq>({
  id: 0,
  empname: '',
  startEntryDate: new Date(''),
  endEntryDate: new Date(''),
  deptId: '',
  postionId: '',
  status: ''
})

let empRsp = ref<EmpRsp[]>([{
  id: 0,
  no: '',
  empname: '',
  sex: 0,
  deptId: 0,
  deptName: '',
  positionId: 0,
  positionName: '',
  status: ''
}])

let apiResponse = ref<ApiResponse<[]>>({
  code: 0,
  message: '',
  data: []
})

let empAdd = ref<EmpAdd>({
  id: null,
  no: '',
  empname: '',
  email: '',
  account: '',
  password: '',
  sex: '',
  entryDate: new Date(''),
  birthday: new Date(''),
  marryStatus: '',
  workStartDate: new Date(''),
  deptId: '',
  deptName: '',
  positionId: '',
  positionName: '',
  authorityId: '',
  authorityName: '',
  avatar: null,
  status: null
})

let auths = ref<Authority[]>([{
  id: 0,
  authority: '',
}])






onSubmit()

function onSubmit() {
  selectEmp(pageSize.value, pageNum.value, empReq.value).then(e => {
    console.log(e);
    apiResponse.value.data = e.t.records
    empRsp.value = e.t.records
    for (let i = 0; i < empRsp.value.length; i++) {
      if (empRsp.value[i].sex === 1) {
        empRsp.value[i].sex = '男'
      }
      if (empRsp.value[i].sex === 2) {
        empRsp.value[i].sex = '女'
      }
      if (empRsp.value[i].status === 1) {
        empRsp.value[i].status = '在职'
      }
      if (empRsp.value[i].status === 2) {
        empRsp.value[i].status = '离职'
      }
    }
    total.value = e.t.total
    pageNum.value = e.t.current
    pageSize.value = e.t.size
    empAdd.value.no = (10001 + total.value).toString()
  }
  )
}

function reset() {
  empReq.value = {
    id: 0,
    empname: '',
    startEntryDate: new Date('2000-01-01'),
    endEntryDate: new Date('2010-01-01'),
    deptId: '',
    postionId: '',
    status: ''
  }
}

function insertOrUpdateEmp() {
  dialogFormVisible.value = true
  if (empAdd.value.sex === '男') {
    empAdd.value.sex = '1'
  }
  if (empAdd.value.sex === '女') {
    empAdd.value.sex = '2'
  }
  if (empAdd.value.marryStatus === '未婚') {
    empAdd.value.marryStatus = '1'
  }
  if (empAdd.value.marryStatus === '已婚') {
    empAdd.value.marryStatus = '2'
  }
  addOrUpdateEmp(empAdd.value).then(e => {
    console.log(empAdd.value);
    console.log(e);
    // dialogFormVisible.value = false
    // reset()
    onSubmit()
    if (e.code === 6000 || e.code === 200) {
      ElMessage.success('操作成功')
    } else {
      ElMessage.error('操作失败')
    }
  })
  dialogFormVisible.value = false
};

function resetForm() {
  empAdd.value = {
    id: null,
    no: '',
    empname: '',
    email: '',
    account: '',
    password: '',
    sex: '',
    entryDate: new Date(''),
    birthday: new Date(''),
    marryStatus: '',
    workStartDate: new Date(''),
    deptId: '',
    deptName: '',
    positionId: '',
    positionName: '',
    authorityId: '',
    authorityName: '',
    avatar: null,
    status: null
  }
}

function addInfo() {
  dialogFormVisible.value = true
  resetForm()
  empAdd.value.no = (10001 + total.value).toString()
  console.log(empAdd.value);
}

function cancel() {
  dialogFormVisible.value = false
  resetForm()
}

function selectAuth() {
  getAuthority().then(e => {
    auths.value = e.t
    console.log(e.t);
  })
}

function changeAuth(authorityId: number) {
  console.log("当前选择的 authorityId:", authorityId);
  empAdd.value.authorityId = authorityId
  // 根据 authorityId 查找完整信息
  const selectedAuth = auths.value.find((item) => item.id === authorityId);
  console.log("当前选中的完整信息:", selectedAuth);
}

// const changeAuth = (authorityId: number) => {
//   console.log("当前选择的 authorityId:", authorityId);
//   // 根据 authorityId 查找完整信息
//   const selectedAuth = auths.value.find((item) => item.id === authorityId);
//   console.log("当前选中的完整信息:", selectedAuth);
// };

const viewEmp = (row) => {
  console.log('查看员工:', row);
  router.push({
    path: '/empinfo',
    query: {
      id: row.id
    }
  })
};

const modifyEmp = (row) => {
  console.log('修改员工:', row);
  dialogFormVisible.value = true
  getOneEmp(row.id).then(e => {
    empAdd.value = e.t
    console.log(empAdd.value);
    if (empAdd.value.sex === 1) {
      empAdd.value.sex = '男'
    }
    if (empAdd.value.sex === 2) {
      empAdd.value.sex = '女'
    }
    if (empAdd.value.marryStatus === 1) {
      empAdd.value.marryStatus = '未婚'
    }
    if (empAdd.value.marryStatus === 2) {
      empAdd.value.marryStatus = '已婚'
    }
  })
  console.log(empAdd.value);
};

const leaveEmp = (row) => {
  console.log('员工离职:', row);
  updateStatusEmp(row.id).then(e => {
    console.log(e);
    console.log(row.id);
    onSubmit()
  })
};

const transferEmp = (row) => {
  console.log('员工调转:', row);
};

const handlePageChange = (page) => {
  console.log('当前页:', page);
};

const goToPage = (page) => {
  console.log('跳转到页面:', page);
};

const logout = () => {
  console.log('注销登录');
};


</script>

<style scoped>
/* .empTable {
  margin-left: 35vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
} */
</style>
